<script setup>
import { getuserList } from '@/api/apis/user';
import { onMounted, reactive, ref } from 'vue';
const UsertableData = ref([])
const data = ref([])
const getUserList = async () => {
    const res = await getuserList(config)
    data.value = res
    UsertableData.value = res.list.map(item => ({
        ...item,
        sex: item.sex === 1 ? '男' : "女"
    }))

}

//搜索功能
//1.数据框输入
const searchname = reactive({
    keyword: ''
})
const config = reactive({
    name: ''
})
const handelsearch = async () => {
    config.name = searchname.keyword
    getUserList()
}


onMounted(() => getUserList())
</script>
<template>
    <div class="topfind">
        <el-button type="primary">新增</el-button>
        <div class="search">
            <el-input placeholder="搜索" v-model="searchname.keyword"></el-input>
            <el-button class="topl" type="primary" @click="handelsearch">搜索</el-button>
        </div>

    </div>
    <el-table :data="UsertableData" style="width: 100%">
        <el-table-column fixed prop="name" label="姓名" width="150" />
        <el-table-column prop="sex" label="性别" width="120" />
        <el-table-column prop="age" label="年龄" width="120" />
        <el-table-column prop="birth" label="出生日期" width="120" />
        <el-table-column prop="addr" label="家庭住址" width="600" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default>
                <el-button type="primary" size="small">
                    编辑
                </el-button>
                <el-button type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="category">
        <el-pagination background layout="prev, pager, next" :total="data.count" />
    </div>
</template>

<style lang="less" scoped>
.topfind {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .search {
        display: flex;

        .topl {
            margin-left: 10px;
        }
    }
}

.category {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
</style>